@import "./var.less";

@checkbox-prefix-cls: ~'@{prefix}-checkbox';

.@{checkbox-prefix-cls}{
  display: inline-flex;
  align-items: center;

  input{
    display: none;
  }

  &-icon{
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: @radius-small;
    border: 2px solid @var-color-border-2;
  }

  &.@{checkbox-prefix-cls}-checked &-icon{
    background-color: @var-primary-6;
    border-color: @var-primary-6;
  }

  &-label{
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: @var-color-text-2;
    margin-left: 8px;
  }
}